<template>
  <div>
    <el-table
      v-loading="listLoading"
      :data="dataSource"
      size="mini"
      fit
      element-loading-text="Loading"
      border
      highlight-current-row
      align="center"
    >
      <el-table-column
        :label="tempDesc.name"
        prop="name"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        :label="tempDesc.startedTime"
        prop="startedTime"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="tempDesc.endTime"
        prop="endTime"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="tempDesc.role"
        prop="role"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="tempDesc.category"
        prop="category"
        align="center"
      ></el-table-column>
      <el-table-column fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.category === 'EMPCompActivity'"
            size="mini"
            type="primary"
            plain
            @click="checkChildFlow(scope.row)"
          >
            查看
          </el-button>
          <!--        <el-button size="mini" type="primary" @click="downLoad(scope.row)" plain>下载</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-loading="dialogLoading"
      :title="childWorkFlow.name"
      :visible.sync="dialogVisible"
      width="80%"
      @close="handleDialogClose"
    >
      <div id="dialogRap"></div>
    </el-dialog>
  </div>
</template>

<script>
  import { getAction } from '@/api/action'
  import { initRaphael } from '@/utils/PreWebRaphaelTools'

  const tempDesc = {
    oid: '',
    name: '名称',
    startedTime: '开始时间',
    endTime: '结束时间',
    role: '角色',
    category: '类型',
  }

  export default {
    name: 'ActivietyList',
    props: {
      workFlowOid: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        tempDesc: tempDesc,
        listLoading: false,
        dialogLoading: false,
        dataSource: [],
        dialogVisible: false,
        childWorkFlow: {},
        url: {
          activityUrl: '/presoftasim/wf/activity/activityByWfOid',
          workFlowByPidAndName: '/presoftasim/wf/workflow/workFlowByPidAndName',
          graph: '/presoftasim/wf/workflow/graphData',
        },
      }
    },
    watch: {
      workFlowOid: function (newValue, oldValue) {
        if (newValue !== '' && newValue !== undefined) {
          this.getActivitiesByWfOid(newValue)
        }
      },
    },
    created() {
      this.getActivitiesByWfOid(this.workFlowOid)
    },
    methods: {
      getActivitiesByWfOid() {
        this.listLoading = true
        getAction(this.url.activityUrl, { oid: this.workFlowOid }).then(
          (response) => {
            this.dataSource = response.data
            console.log(this.dataSource)
            this.listLoading = false
          }
        )
      },
      handleDialogClose() {
        this.dialogVisible = false
        initRaphael('dialogRap', [])
      },
      // 查看子流程图
      checkChildFlow(row) {
        this.dialogLoading = true
        let param = {}
        param.name = row.name
        param.parentId = this.workFlowOid
        getAction(this.url.workFlowByPidAndName, param).then((response) => {
          this.childWorkFlow = response.data
          this.getGraph(this.childWorkFlow)
          this.dialogLoading = false
          this.dialogVisible = true
        })
      },

      getGraph(wf) {
        getAction(this.url.graph, { workFlowId: wf.oid }).then((res) => {
          this.initFun([res.data])
        })
      },
      initFun(jsonDataArr) {
        // this.$refs.rap.clearStates();
        initRaphael('dialogRap', jsonDataArr)
      },
    },
  }
</script>

<style>
  .el-dialog__body {
    overflow: auto;
  }
  .el-dialog {
    margin-bottom: 10vh;
  }
</style>
